<template>
    <div class="contion">
        <div class="pay">
            <div class="pay_1">
                <van-icon name="arrow-left" size="25" @click="back()" style="margin-left:5px"/>
                <span style="margin-left:250px"><b>结账</b></span>
            </div>
            <div class="pay_3">
                <div>
                    <div class="aa">
                        <div class="pay_3_1">
                            <van-icon name="location-o" size="20" style="color:#E44F32;margin:15px"/>
                        </div>
                        <div class="ser">— — — — — — — —</div>
                    </div>
                    <div class="bb">地址</div>
                </div>
                <div>
                    <div class="aa">
                        <div class="pay_3_2">
                            <van-icon name="idcard" size="20" style="color:#E44F32;margin:15px"/>
                        </div>
                        <div class="ser">— — — — — — — —</div>
                    </div>
                    <div>付款方式</div>
                </div>
                <div>
                    <div class="pay_3_3">
                        <van-icon name="orders-o" size="20" style="color:#E44F32;margin:15px"/>
                    </div>
                    <div>订单结算</div>
                </div>
            </div>
            <div class="pay_2">
                <div class="pay_2_1"><b>订单产品</b></div>
                <div v-for="(j,k) in cartlist" :key="k" class="pay_2_2">
                    <img :src="j.shoe.image" class="" style=" width:150px;height:150px;margin-bottom:20px;">
                    <div class="cart_2_2">
                        <span style="margin-top:10px;margin-left:3px;width:200px">{{ j.shoe.name }}</span>
                        <span style="margin-top:10px">￥{{ j.shoe.price }}</span>
                        <span style="margin-top:10px">数量：{{ j.count }}</span>
                    </div>
                </div>
            </div>
            <div class="pay_5">
                <div class="pay_5_1"><b>送货地址</b></div>
                <div class="pay_5_2">
                    <span><b>{{ address1.name }}</b></span>
                    <span>{{ address1.phone }}</span>
                    <div>
                        <span>{{ address1.province }}</span>
                        <span>{{ address1.city }}</span>
                        <span>{{ address1.address }}</span>
                    </div>
                </div>
            </div>
            <div class="pay_5">
                <div class="pay_5_1"><b>付款方式</b></div>
                <div class="pay_5_2">
                    <span style="margin-top:30px;font-size:20px"><b>{{ pay1.name }}</b></span>
                </div>
            </div>
            <div class="pay_4">
                <el-button @click="pay">下一步</el-button>
            </div>
        </div>
    </div>
</template>

<script setup>
import {ref,onMounted} from "vue"
import {ElMessage} from 'element-plus'
import axios from 'axios'
import {useRouter} from 'vue-router'

const router = useRouter()

const back = () =>{
    router.back();
}

let cartlist = ref([])

const getData = () =>{
    axios.get(`http://127.0.0.1:8000/home/cart/?user=${localStorage.getItem("userid")}`).then(res =>{
        cartlist.value = res.data.data
    })
}


const userid = localStorage.getItem("userid")
const typeid = localStorage.getItem("paytype")
const score = ref(0)
// console.log(userid, typeid)
const pay = () =>{
    axios.post("http://127.0.0.1:8000/home/order/", 
    {user:userid,types:typeid, score:score.value}).then(res=>{
        if(res.data.code == 200){
            ElMessage.success('下单成功')
             const orderid = res.data.data.order_id
            console.log(orderid)
            axios.post("http://127.0.0.1:8000/home/link/",{order:orderid}).then(res=>{
                console.log(res.data)
                if(res.data.code == 201){
                    ElMessage.error(res.data.msg)
                }
                else{
                    location.href=res.data.link
                }
            })
        }
        else{
            ElMessage.error('下单失败')
        }
    })
}

let address1 = ref([])

const getData1 = () =>{
    axios.get(`http://127.0.0.1:8000/home/deta/${localStorage.getItem("addressid")}`).then(res =>{
        address1.value = res.data
    })
}

let pay1 = ref([])

const getpay = () =>{
    axios.get(`http://127.0.0.1:8000/home/type/${localStorage.getItem("paytype")}`).then(res =>{
        pay1.value = res.data
    })
}


onMounted(()=>{
    getData()
    getData1()
    getpay()
})
</script>

<style scoped>
.contion{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    vertical-align: middle;
}

.pay{
    background-color: #F7F7F7F7;
    height: auto;
    width: 600px;
}

.pay_1{
    width: 600px;
    height: 60px;
    font-size: 25px;
    padding-top: 20px;
    background-color: #FFFFFF;
}

.pay_3{
    display: flex;
    flex-direction: row;
    height: 100PX;
    background-color: #FFFFFF;
}

.aa{
    display: flex;
    flex-direction: row;
}

.pay_3_1{
    margin-left: 100px;
    width:50px;
    height:50px;
    border-radius: 15px;
    background-color:#E44F320D;
}

.pay_3_2{
    width:50px;
    height:50px;
    border-radius: 15px;
    background-color:#E44F320D;
}

.pay_3_3{
    width:50px;
    height:50px;
    border-radius: 15px;
    background-color:#E44F320D;
}

.ser{
    margin-top: 20px;
    color:darkgray;
    font-size: 10px;
    color:#E44F32;
}

.bb{
    margin-left: 110px;
}

.cart_2_2{
    display: flex;
    flex-direction: column;
    margin-left: 40px;
}

.pay_4 button{
    margin-top: 200px;
    margin-left: 100px;
    width: 400px;
    height: 60px;
    border: 1px solid #E44F32;
    background-color: #E44F32;
    font-size: 20px;
    color:#FFFFFF;
    border-radius: 15px;
    margin-bottom: 40px;
}

.pay_2_1{
    width: 600px;
    height: 50px;
    font-size: 20px;
    background-color: #FFFFFF;
}

.pay_2_2{
    display: flex;
    flex-direction: row;
    background-color: #FFFFFF;
}

.pay_5_1{
    width: 600px;
    height: 50px;
    font-size: 20px;
    margin-top: 20px;
}

.pay_5_2{
    display: flex;
    flex-direction: column;
    background-color: #FFFFFF;
    height: 100px;
    font-size: 18px;
    padding-left: 10px;
}

</style>